<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib  prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib  prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>区域订单统计信息</title>
	  <jsp:include page="../../util/import.jsp"/>
	  <script type="text/javascript">
	  $(function(){

        var $tt= $("#tt").bootstrapTable({
            url: '${basePath}/back/areaOrdersCount/listAreaOrdersCounts.sjson',         	/**请求后台的URL（*）**/
            method: 'post',                       	/**请求方式（*）**/
            contentType: "application/x-www-form-urlencoded",
            dataType: 'json',
            toolbar: '#toolbar',               	    /**工具按钮用哪个容器**/
            striped: true,                      	/**是否显示行间隔色**/
            cache: false,                       	/**是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）**/
            pagination: true,                   	/**是否显示分页（*）**/
            sortable: false,                    	/**是否启用排序**/
            sortOrder: 'asc',                   	/**排序方式**/
            queryParamsType: '',
            sidePagination: 'server',           	/**分页方式：client客户端分页，server服务端分页（*）**/
            pageNumber: 1,
            pageSize:10,							/**初始化加载第一页，默认第一页**/
            pageList: [5,10, 25, 50],        	    /**可供选择的每页的行数（*）**/
            search: false,                       	/**是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大**/
            strictSearch: true,
            showColumns: true,                  	/**是否显示所有的列**/
            showRefresh: true,                  	/**是否显示刷新按钮**/
            minimumCountColumns: 2,             	/**最少允许的列数**/
            clickToSelect: true,                	/**是否启用点击选中行**/
            uniqueId: 'ordersId',                   /**每一行的唯一标识，一般为主键列**/
            singleSelect  : true,                   /**单选checkbox**/
            showToggle:false,                    	/**是否显示详细视图和列表视图的切换按钮**/
            cardView: false,                    	/**是否显示详细视图**/
            detailView: false,                  	/**是否显示父子表**/
            columns: [
                {checkbox: true},
                {field: 'Number', title: '编号',align: 'center',valign: 'middle',width:'50px',
                    formatter: function (value, row, index) {
                        var page = $tt.bootstrapTable("getPage");
                        return page.pageSize * (page.pageNumber - 1) + index + 1;
                    }
                },
                {field:"fullName",title:"区域名称",align: 'center', valign: 'middle'},
                {field:"count",title:"订单数量（单）",align: 'center', valign: 'middle'},
                {field:"sum",title:"订单总金额（元）",align: 'center', valign: 'middle'}
            ],
            queryParams: function (params) {
                /**特别说明，返回的参数的值为空，则当前参数不会发送到服务器端,这种指定请求参数的方式和datatables控价类似**/
                params.regionLocation = $("#q_province").val();
                params.city = $("#q_cities").val();
                params.country = $("#q_district").val();
                params.createTimeStart = $("#q_createTime_start").val();
                params.createTimeEnd = $("#q_createTime_end").val();
                params.currentPage = params.pageNumber;
                return params;
            }
        });

      });

      function chengeArea(id, level, operation) {
          var province = null;
          var cities = null;
          var district = null;
          if (operation == "query") {
              province = "q_province";
              cities = "q_cities";
              district = "q_district";
          } else if (operation == "addOrEdit") {
              province = "province";
              cities = "cities";
              district = "district";
          }
          $.ajax({
              url: "${basePath}/back/cityCourier/findCityList.sjson",
              type: "post",
              dataType: "json",
              data: {id: id},
              success: function (result) {
                  var areaList = JSON.parse(result.cityList);
                  if (areaList != "") {
                      var htmlOptionInit = null;
                      var htmlOptionData = null;
                      for (var i = 0; i < areaList.length; i++) {
                          htmlOptionData += "<option  value='" + areaList[i].areaId + "'>" + areaList[i].name + "</option>";
                          if (level == 1) {
                              htmlOptionInit = "<option value=''>请选择城市</option>";
                              $("#" + cities).html(htmlOptionInit + htmlOptionData);
                          }
                          if (level == 2) {
                              htmlOptionInit = "<option value=''>请选择区(县)</option>";
                              $("#" + district).html(htmlOptionInit + htmlOptionData);
                          }
                      }
                  }
                  var firstArea = $("#" + province).val();
                  if (firstArea == null || firstArea == "") {
                      $("#" + cities).html("<option value=''>请选择城市</option>");
                      $("#" + district).html("<option value=''>请选择区(县)</option>");
                  }
                  var secondArea = $("#" + cities).val();
                  if (secondArea == null || secondArea == "") {
                      $("#" + district).html("<option value=''>请选择区(县)</option>");
                  }
              }
          });
      }

      /**导出excel**/
	  <shiro:hasPermission name="back_gotoAreaOrdersCountPage_export">
		  function exportAreaOrdersCountExcel() {
			  window.location.href="${basePath}/back/areaOrdersCount/exportAreaOrdersCountsExcel.inhtm?regionLocation="+$("#q_province").val()+"&city="+$("#q_cities").val()+"&country="+$("#q_district").val()+"&createTimeStart="+$("#q_createTime_start").val()+"&createTimeEnd="+$("#q_createTime_end").val();
		  }
	  </shiro:hasPermission>
	</script>

</head>
<body>

<div class="panel-body" id="customer-main-panel">
	<!-- 查询条件 -->
	<div class="panel panel-default">
		<div class="panel-heading">区域订单统计查询</div>
		<div class="panel-body">
			<form id="qform" class="form-horizontal">
				<div class="form-group" style="margin-top:15px">
					<div class="col-sm-4" style="width: 480px;">
						<div class="input-group input-group-sm">
							<span class="input-group-addon">所在地区</span>
							<select id="q_province" onchange="chengeArea(this.value,'1','query')" class="form-control" style="text-align: left;width: 120px;">
								<option value="">请选择省份</option>
								<c:forEach  items="${regionLocationList}" var="first">
									<option  value="${first.areaId}">${first.name}</option>
								</c:forEach>
							</select>
							<select id="q_cities" onchange="chengeArea(this.value,'2','query')" class="form-control" style="text-align: left;width: 120px;">
								<option value="">请选择城市</option>
							</select>
							<select id="q_district" class="form-control" style="text-align: left;width: 120px;">
								<option value="">请选择区(县)</option>
							</select>
						</div>
					</div>
                    <div class="col-sm-3" style="width: 360px;">
                        <div class="input-group input-group-sm ">
                            <span class="input-group-addon">交易开始时间</span>
                            <div class="input-group date form_datetime" data-link-field="dtp_input1">
                                <input id="q_createTime_start" name="q_createTime_start" style="height: 30px; border: 1px solid #c6c6c6;border-right:none;padding-left:10px; " size="17.5" type="text" value=""  placeholder="请选择交易开始时间" readonly>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                            </div>
                            <script type="text/javascript">
                                $('.form_datetime').datetimepicker({format: "yyyy-MM-dd",language:'zh-CN',weekStart:1, todayBtn:1,autoclose: 1,todayHighlight: 1,startView: 2, minView: 2, forceParse: 0});
                            </script>
                        </div>
                    </div>
                    <div class="col-sm-3" style="width: 360px;">
                        <div class="input-group input-group-sm ">
                            <span class="input-group-addon">交易结束时间</span>
                            <div class="input-group date form_datetime" data-link-field="dtp_input1">
                                <input id="q_createTime_end" name="q_createTime_end" style="height: 30px; border: 1px solid #c6c6c6;border-right:none;padding-left:10px; " size="17.5" type="text" value=""  placeholder="请选择交易结束时间" readonly>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                            </div>
                            <script type="text/javascript">
                                $('.form_datetime').datetimepicker({format: "yyyy-MM-dd",language:'zh-CN',weekStart:1, todayBtn:1,autoclose: 1,todayHighlight: 1,startView: 2, minView: 2, forceParse: 0});
                            </script>
                        </div>
                    </div>

					<div class="col-sm-2">
						<button type="button" id="btn_query" class="btn btn-primary">查询</button>&nbsp;&nbsp;
						<button type="reset" class="btn btn-success" id="resetBtn">重置</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- 工具栏 -->
	<div id="toolbar" class="btn-group">
		<shiro:hasPermission name="back_gotoAreaOrdersCountPage_export">
			<button id="btn_export" type="button" class="btn btn-default" onclick="exportAreaOrdersCountExcel()">
				<span class="glyphicon glyphicon-export" aria-hidden="true"></span>&nbsp;导出报表
			</button>
		</shiro:hasPermission>
		<shiro:hasPermission name="back_gotoAreaOrdersCountPage_chartDisplay">
			<button id="btn_signal" type="button" class="btn btn-default" onclick="">
				<span class="glyphicon glyphicon-signal" aria-hidden="true"></span>&nbsp;图表展示
			</button>
		</shiro:hasPermission>
	</div>

	<!-- 渲染的table -->
	<table id="tt"></table>
</div>
</body>
</html>

